<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>编辑用户</title>
    <link rel="stylesheet" href="../asset/css/components.css" />
    <link rel="stylesheet" href="../asset/css/bootstrap.css" />
    <link rel="stylesheet" href="../asset/css/plugins.css" />
    <link rel="stylesheet" href="../asset/css/main.css" />
    <link rel="stylesheet" href="../asset/css/themes.css" />
</head>

<body>
<div id="body">
    <div id="app">
        <div class="tabbody">
            <div class="bodyli active">
                <div class="inputbox">
                    <span class="title">用户名</span>
                    <div class="inputright">
                        <input type="text" id="username" v-model="username"
                               class="form-control input-sm" placeholder="请输入用户名">
                    </div>
                </div>
                <div class="inputbox">
                    <span class="title">密码</span>
                    <div class="inputright">
                        <input type="password" id="password" v-model="password" class="form-control input-sm"
                               placeholder="请输入密码">
                    </div>
                </div>
                <div class="inputbox">
                    <span class="title">姓名</span>
                    <div class="inputright">
                        <input type="text" id="realname" v-model="realname"
                               class="form-control input-sm" placeholder="请输入姓名">
                    </div>
                </div>  <div class="inputbox">
                <span class="title">性别</span>
                <div class="inputright">
                    <!--<select id="sex" value="" type="sex" style="flex: 1;color:#999;height: 30px;padding: 0px 10px;border: 1px solid #ddd;font-size: 12px;line-height: 1.5;" name="sex" v-model="sex" lay-verify="">
                        <option value="">请选择性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>-->
                    <input type="text" id="sex" v-model="sex"
                           class="form-control input-sm" >
                </div>
            </div>
                <div class="inputbox">
                    <span class="title">年龄</span>
                    <div class="inputright">
                        <input type="text" id="age" v-model="age" class="form-control input-sm"
                               placeholder="请输入年龄">
                    </div>

                </div>
                <div class="inputbox">
                    <span class="title">联系方式</span>
                    <div class="inputright">
                        <input type="text" id="contact" v-model="tel"
                               class="form-control input-sm" placeholder="请输入联系方式">
                    </div>
                </div>
                <div class="inputbox" style="display: none;">
                    <span class="title">类型</span>
                    <div class="inputright">
                        <input type="text" id="type" v-model="type"
                               class="form-control input-sm" placeholder="">
                    </div>
                </div>
              <!--  <div class="tbfooter">
                    <button class="btn btn-success" @click.prevent="update()">
                        <i class="fa fa-floppy-o"></i> 提交保存
                    </button>
                    &nbsp;&nbsp;&nbsp;
                    <button class="btn btn-default" @click.prevent="reset()">
                        <i class="fa fa-recycle"></i> 取消
                    </button>
                </div>-->
            </div>
        </div>

        <script type="text/javascript" src="../asset/js/jquery.min.js"></script>
        <script type="text/javascript" src="../asset/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../asset/js/axios.min.js"></script>
        <script type="text/javascript" src="../asset/js/vue.js"></script>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',// 绑定作用域
                data: { //定义数据用于vue的双向绑定
                    id: '',
                    username: '', // 用户名
                    password: '', // 密码
                    realname: '', // 姓名
                    tel: '', // 联系方式
                    sex: '', //
                    age: '', //
                    type: '1', //
                },
                methods: {
                    getUrlParam: function () {
                        var name, value;
                        var str = location.href; // 取得整个地址栏
                        var num = str.indexOf("?"); // 定位参数起始位置
                        str = str.substr(num + 1); // 取得所有参数
                        var arr = str.split("&"); // 各个参数放到数组里
                        for (var i = 0; i < arr.length; i++) {
                            num = arr[i].indexOf("=");
                            if (num > 0) {
                                name = arr[i].substring(0, num);
                                value = arr[i].substr(num + 1);
                                this.id = value; // 确认主键参数
                            }
                        }
                    },
                    loadPage: function () {
                        this.id = sessionStorage.getItem('id');
                        let _this = this;
                        axios.get('http://127.0.0.1:8080/equipment/user/getUserById.action?id=' + _this.id).then(result => {
                            _this.username= result.data.username;
                            _this.password= result.data.password;
                            _this.realname= result.data.realname;
                            _this.tel= result.data.tel;
                            _this.sex= result.data.sex;
                            _this.age= result.data.age;
                            _this.type= result.data.type;
                        });
                    },
                    reset: function () {
                        this.loadPage();
                    },
                    update: function () {
                        let _this = this;
                        var data = {
                            id: _this.id,
                            username: _this.username,
                            password: _this.password,
                            realname: _this.realname,
                            tel: _this.tel,
                            age: _this.age,
                            sex: _this.sex,
                            type:_this.type,
                        };
                        axios.post('http://127.0.0.1:8080/equipment/user/updateUser.action', data).then(result => {
                            if (result.data.code > 0) {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload();
                                parent.layer.close(index);
                            } else {
                                alert('修改失败');
                            }
                        });
                    },
                },

                created() { // 生命周期相关的函数
                    this.getUrlParam();
                    this.loadPage();
                    let _this = this;
                },
            })
        </script>
</body>

</html>


